$(function() {

  $("#ffecha_publicacion").datepicker({
       dateFormat: 'yy-mm-dd', //formato de la fecha - dd,mm,yy=dia,mes,año numericos  DD,MM=dia,mes en texto
       //minDate: '-2Y', maxDate: '+1M +10D', //restringen a un rango el calendario - ej. +10D,-2M,+1Y,-3W(W=semanas) o alguna fecha
       changeMonth: true, //permite modificar los meses (true o false)
       changeYear: true, //permite modificar los años (true o false)
       //yearRange: (fecha_hoy.getFullYear()-70)+':'+fecha_hoy.getFullYear(),
       numberOfMonths: 1 //muestra mas de un mes en el calendario, depende del numero
  });

  var load_num = $('#load_num').val();
  var tipo_articulo = $('#ftipo_articulo').val();
  mostrar(tipo_articulo);
  if (load_num == 't')
    ajax_get_siguiente_numero(tipo_articulo);

  $('#ftipo_articulo').on('change', function(){
    var tipo_articulo = $(this).val();
    mostrar(tipo_articulo);
    ajax_get_siguiente_numero(tipo_articulo);
  });

  // CUANDO SELECCIONAN UNA IMAGEN REALIZA EL UPLOAD
  $('#fimagen1, #fimagen2, #fimagen3').on('change', '', function(event) {
    var parent = $(this).parent().parent();
    form_upload_img(parent, this);
  });

  $('button[type="reset"]').on('click', function(event) {
    reset_input_file();
  });

  // Cuando el button submit sea clickeado desasignara el evento submit del ajaxForm y le asigna uno nuevo
  // para que realize el envion del formulario normalmente
  $('button[type="submit"]').on('click', function(event) {
    $('form').unbind('submit').submit();
  });

  var i = 1;
  $('input[name^="path_fimagen"]').each(function(e) {
    var fpath = $(this).val().split("application/");

    $('<img src="'+base_url+'application/'+fpath[1]+'" width="200" height="200"/>').appendTo($('#uniform-fimagen'+i).parent());
    $('#uniform-fimagen'+i).css({"display" : "none"});
    i++;
  });

});

function mostrar (articulo)
{
  if(articulo == 3)
  {
    $('.tipo1').css({'display':'none'});
    $('.tipo3').css({'display':'block'});
  }
  else if(articulo == 1)
  {
    $('.tipo3').css({'display':'none'});
    $('.tipo1').css({'display':'block'});
  }
  else
  {
    $('.tipo3').css({'display':'none'});
    $('.tipo1').css({'display':'none'});
  }
}

function ajax_get_siguiente_numero (tipo_articulo) {
  $.post(base_url+'panel/articulos/ajax_get_siguiente_numero/', {'ftipo_articulo': tipo_articulo}, function(resp){
    $('#fnumero').val(resp);
  }, "json").complete(function(){
      //loader.close();
    });
}

/**
 * Crea los tags necesarios para que visualmente se muestre la progress-bar y el total de porcentaje
 * Cambia el Action del Formulario para indicar la url correcta que realizara la subida de la imagen
 * Inicializa el Plugin ajaxForm
 * Realiza el envio del Form
 * @param  {[type]} parent [description]
 * @param  {[type]} tthis  [description]
 * @return {[type]}        [description]
 */
function form_upload_img (parent, tthis) {

  var html_cual_img = '<input type="hidden" name="cualimg" value="'+$(tthis).attr('name')+'" id="cualimg"/>'; // input auxiliar para saber que file se selecciono
  var html_progress_bar = '<div class="progress progress-striped active" style="margin-bottom: 9px; width: 30%;" id="progress-bar"><div class="bar" style="width: 0%"></div></div><span class="help-block percent">0%</span>';

  parent.children(".uploader").css({"display":"none"}); // Oculta el input-file original

  $('form').attr('action', base_url+'panel/articulos/upload_img/'); // Cambia el action del form
  $(html_cual_img).appendTo(parent); // Agregar el html del input que contiene el name del input-file que cambio

  $(html_progress_bar).appendTo(parent); // Agrega el html del progress-bar

  ajaxForm(); // Inicializa el plugin jquery-form

  $('form').submit(); // Realiza el envio del formulario
}

/**
 * Muestra visualmente la imagen que se subio al server y habilita el plugin imgAreaSelect para que se puedan
 * seleccion un area de la iamgen
 *
 * @param  {[type]} path [description]
 * @return {[type]}      [description]
 */
function crop_img (path) {
  var parent = $('#cualimg').parent(); // Obtiene el padre del file q se selecciono
  var cualimg = $('#cualimg').val(); // Obtiene el file que se selecciono (fimagen1, fimagen2 ... )

  // Regresa el action original del form
  var href = window.location.href.split("panel/");
  $('form').attr('action', base_url+'panel/'+href[1]);

  // Agregar al form un input con la ruta de la imagen ya en el server
  $('<input type="hidden" name="path_'+cualimg+'" value="'+path+'" id="path_'+cualimg+'" />').appendTo($('form'));

  // #cualimg,
  $('#progress-bar, .percent').remove(); // Elimina la barra de progreso y el porcetaje

  var fpath = path.split("application/");
  // Crea el tag <img> con el path de la imagen que se subio al server 500x500 y un boton para aceptar el area seleccionada de la imagen
  $('<img src="'+base_url+'application/'+fpath[1]+'" width="500" height="500" id="crop-'+cualimg+'"/><button type="button" class="btn btn-warning" id="cropImg" onClick="ajax_crop_img(this)" style="margin-left: 10px;">Seleccionar Area</button>').appendTo(parent);
  // $('<a href="'+base_url+'application/'+path+'" rel="superbox[image]">SuperBox</a>').appendTo($('body'));

  // Inicializa el plugin para seleccionar un area de la imagen
  $('img#crop-'+cualimg).imgAreaSelect({
        aspectRatio: '1:1',
        handles: true,
        fadeSpeed: 200,
        minWidth: 240,
        // minHeight: 280,
        onInit: img_area_select_vals,
        onSelectChange: img_area_select_vals,
        x1: 127, y1: 138, x2: 367, y2: 378, width: 240});

  // Crea inputs auxiliares con las coordenadas x1, y1, x2 ,y2, width y height y los agrega al <body>
  $(' <input type="hidden" id="x1" /><input type="hidden" id="y1" /><input type="hidden" id="x2" /><input type="hidden" id="y2" /><input type="hidden" id="w" /><input type="hidden" id="h" /> ').appendTo($('body'));
}

/**
 *  Asigna los valores de x1, y1, x2, y2, width y height a sus respectivos inputs-hidden
 * @param  {[type]} img
 * @param  obj selection
 */
function img_area_select_vals (img, selection) {
  $('#x1').val(selection.x1);
  $('#y1').val(selection.y1);
  $('#x2').val(selection.x2);
  $('#y2').val(selection.y2);
  $('#w').val(selection.width);
  $('#h').val(selection.height);
}

/**
 * Funcion que es llamada cuando el usuario da click en el boton "seleccionar area".
 *
 * Realiza el crop de una imagen mediante ajax, pasandole los parametros necesarios
 * @param  obj btn [El boton que manda llamar la funcion]
 */
function ajax_crop_img (btn) {
  var parent = $(btn).parent(); // Obtenemos el padre del boton anaranjado "seleccionar area"
  var cualimg = parent.children("#cualimg").val();

  var path = $('#path_'+cualimg).val();
  var x1 = $('#x1').val();
  var y1 = $('#y1').val();
  var x2 = $('#x2').val();
  var y2 = $('#y2').val();
  var w = $('#w').val();
  var h = $('#h').val();

  $.post(base_url+'panel/articulos/ajax_crop_img', {"path":path, "x1":x1, "y1":y1, "x2":x2, "y2":y2, "w":w, "h":h}, function(response) {
    if (response === '1') {
      var srcimg = parent.children("img").attr("src");
      $('img#crop-'+cualimg).imgAreaSelect({remove: true});

      parent.children("#cualimg, img, button").remove();
      $('#x1, #y1, #x2, #y2, #w, #h').remove();

      $('<img src="'+srcimg+'" width="200" height="200"/>').appendTo(parent);
    }
  });
}

/**
 * Realiza el reseteo de cada seccion de los input-file, es decir elimina
 * todo lo que no sea los input-file que se encuentren en su mismo padre
 * @return {[type]} [description]
 */
function reset_input_file () {
  var i = 1;
  $('input[name^="path_fimagen"]').each(function(e) {
    var parent = $('#uniform-fimagen'+i).parent();
    var cualimg = 'fimagen'+i;

    $('img#crop-'+cualimg).imgAreaSelect({remove: true});
    parent.children("#cualimg, img, button").remove();
    $('#x1, #y1, #x2, #y2, #w, #h').remove();

    $('#uniform-fimagen'+i).css({"display": "block"}).val(""); // Mostraremos el o los inputs-file ocultos
    $('#uniform-fimagen'+i+' > .filename').html("No file selected");
    $('#path_fimagen'+i).remove(); // Elimina el input-text con la ruta de la imagen si existe
    i++;
  });
}
